<!-- by your name -->
<template>
  <view class="yy-footer">
    <view
      class="yy-footer__inner"
      :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }"
      :style="[innerStyle]"
    >
      <slot></slot>
    </view>
    <view
      class="yy-footer__placeholder"
      :class="{ 'safe-area-inset-bottom': safeAreaInsetBottom }"
      :style="[placeholderStyle]"
    ></view>
  </view>
</template>

<script>
  export default {
    name: 'yy-footer',
    props: {
      zIndex: {
        type: Number,
        default: 100
      },
      height: {
        type: [Number, String],
        default: 0
      },
      bottom: {
        type: [Number, String],
        default: 0
      },
      safeAreaInsetBottom: {
        type: Boolean
      }
    },
    data() {
      return {}
    },
    computed: {
      innerStyle() {
        return {
          zIndex: this.zIndex,
          bottom: this.bottom + 'rpx'
        }
      },
      placeholderStyle() {
        return {
          height: this.height + this.bottom + 'rpx'
        }
      }
    },

    methods: {}
  }
</script>
<style lang="scss" scoped>
  .yy-footer {
    margin-top: auto;
    position: relative;
    &__inner {
      left: 0;
      width: 100%;
      position: fixed;
    }
  }
  .safe-area-inset-bottom {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: calc(env(safe-area-inset-bottom) - 30rpx) !important;
  }
</style>
